<template>
  <el-menu
    class="elan-menu"
    ref="menu"
    v-bind="$attrs"
    v-on="$listeners"
    :default-openeds="defaultOpends"
    :default-active="$route.path"
    @open="handleOpen"
    @close="handleClose"
    @select="handleSelect"
  >
    <menu-tree :list="list" :props="defaultProps"></menu-tree>
  </el-menu>
</template>

<script>
import MenuTree from "./MenuTree";
export default {
  name: "ElanMenu",
  components: {
    MenuTree,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {
        return {
          path: "path",
          icon: "icon",
          children: "children",
          title: "title",
          parentid: "parentid",
        };
      },
    },
  },
  data() {
    return {
      defaultActive: "",
      defaultOpends: [],
      defaultProps: {},
      iconObj: {
        "/home": "home",
        "/client": "client",
        "/resource": "resource",
        "/opportunity": "demand",
        "/approve": "approve",
        "/shortcutMenu": "shortcutMenu",
        "/authority": "manage",
      },
    };
  },
  computed: {
    watchFirstRoute() {
      if (this.$route.matched.length) {
        return this.$route.matched[0].path;
      }
      return this.$route.path;
    },
  },
  created() {
    this.defaultProps = Object.assign(
      {
        path: "path",
        icon: "icon",
        children: "children",
        title: "title",
        parentid: "parentid",
      },
      this.props
    );
  },
  watch: {
    watchFirstRoute: {
      handler(nval, oval) {
        // 根据选中的子菜单，修改收起来的侧边栏图标颜色
        let curIcon = "elan-svg-" + this.iconObj[nval];
        // this.setIconColor();
        // console.log("test8969",document.getElementsByClassName(curIcon)[0])
        if (document.getElementsByClassName(curIcon)[0]) {
          document.getElementsByClassName(curIcon)[0].style.color = "#369afe";
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.$nextTick((_) => {
      this.computeRoute();
    });
  },
  methods: {
    computeRoute() {
      let route = this.$route;
      // console.log({ route });
      const fullPath = route.fullPath;
      const matched = route.matched;
      const list = matched.slice(0, -1).map((item) => item.path);
      this.defaultActive = route.path;
      const pathList = fullPath.split("/");
      let defaultOpends = pathList.slice(0, -1).join("/");
      this.defaultOpends = Array.from(new Set([...list, ...[defaultOpends]]));
    },
    handleClose(index, path) {
      this.defaultOpends.splice(
        this.defaultOpends.findIndex((i) => i === index),
        1
      );
    },
    handleOpen(index, path) {
      this.defaultOpends.push(index);
      // console.log("test",this.defaultOpends)
    },
    // 收起来的侧边栏图标,还原默认颜色
    setIconColor() {
      let arr = document.getElementsByClassName("elan-svg-common");
      arr.forEach((item) => {
        item.style.color = "#818bb3";
      });
    },
    handleSelect(key, keyPath) {
      localStorage.setItem("currentPage", 1);
    },
  },
};
</script>

<style></style>
